<template>
	<div class='page-default'>
		{{defaultText}}
		<el-button
			type="text"
			@click="logout"
		>退出登录
		</el-button>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import {mapState} from 'vuex'

  export default {
    name: "default",
    data() {
      return {}
    },
    computed: {
      ...mapState([
        'isLogged',
        'userInfo'
      ]),
      defaultText() {
        let isLogged = this.isLogged,
          userInfo = this.userInfo
        if (isLogged === undefined) return '正在登录...'
        if (!isLogged) return '请先登录'
        if (!userInfo.username) return '正在获取用户信息...'
        return '欢迎您，' + userInfo.username
      }
    },
    async mounted() {
      await this.$store.dispatch('validateIsLogged')
      await this.$store.dispatch('getUserInfo')
    },
    methods: {
      logout() {
        this.$axios.get('/user/logout')
          .then(({success, data}) => {
            this.$store.commit('updateIsLogged', undefined)
            this.$message({
              type: 'success',
              message: '退出成功'
            })
            this.$router.push({
              path: '/login'
            })
          })
      }
    }
  }
</script>

<style lang='less'>
	.page-default {

	}
</style>
